<template>
  <div>
    <input type="file" multiple @change="onFileChange" />
    <div v-for="(image, index) in images" :key="index">
      <img :src="image" :alt="'Image ' + (index + 1)" />
    </div>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const images = ref([]);

    function onFileChange(event) {
      const files = event.target.files;
      for (let i = 0; i < files.length; i++) {
        const reader = new FileReader();
        reader.onload = (e) => {
          images.value.push(e.target.result);
        };
        reader.readAsDataURL(files[i]);
      }
    }

    return {
      images,
      onFileChange,
    };
  },
};
</script>